.video-wrapper {
  position: relative;
  font-size: 14rem;
  width: 100%;
  height: 100%;
  text-align: center;

  .pause-icon {
    // font-size: 2rem;
    font-size: 32px;
  }

  .video {
    max-width: 100%;
    height: 100%;
    transition:
      height,
      margin-top 0.3s;
  }
  .float {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;

    .normal {
      position: absolute;
      bottom: 0;
      width: 100%;
      transition: all 0.3s;

      .comment-status {
        display: flex;
        align-items: center;

        .comment {
          .type-comment {
            display: flex;
            background: rgb(130, 21, 44);
            border-radius: 50px;
            padding: 3px;
            margin-bottom: 20px;

            .avatar {
              width: 36px;
              height: 36px;
              border-radius: 50%;
            }

            .right {
              margin: 0 10px;
              color: var(--second-text-color);

              .name {
                margin-right: 10px;
              }

              .text {
                color: white;
              }
            }
          }
        }

        .loveds {
          /*cxk*/
          position: relative;
        }

        .type-loved {
          width: 40px;
          height: 40px;
          position: relative;
          margin-bottom: 20px;
          animation: test 1s;
          animation-delay: 0.5s;

          .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
          }

          .loved {
            position: absolute;
            bottom: 0;
            left: 20px;
            width: 10px;
            height: 10px;
            background: red;
            padding: 3px;
            border-radius: 50%;
            border: 2px solid white;
          }
        }

        @keyframes test {
          from {
            display: block;
            transform: translate3d(0, 0, 0);
          }
          to {
            display: none;
            transform: translate3d(0, -60px, 0);
          }
        }
      }
    }

    .progress {
      $w: 90%;
      $radius: 10rem;
      $h: 2rem;
      $tr: height 0.3s;
      $p: 50px;

      z-index: 10;
      position: absolute;
      bottom: -1rem;
      height: 10rem;
      left: calc((100% - $w) / 2);
      width: $w;
      display: flex;
      align-items: flex-end;
      margin-bottom: 2rem;

      .time {
        position: absolute;
        z-index: 9;
        font-size: 24px;
        bottom: 50px;
        left: 0;
        right: 0;
        color: white;
        text-align: center;

        .duration {
          color: darkgray;
        }
      }

      .bg {
        transition: $tr;
        position: absolute;
        width: 100%;
        height: $h;
        background: #4f4f4f;
        border-radius: $radius;
      }

      .progress-line {
        transition: $tr;
        height: calc($h + 0.5rem);
        width: $p;
        border-radius: $radius 0 0 $radius;
        background: #777777;
        z-index: 1;
      }

      .point {
        transition: all 0.2s;
        width: $h + 2;
        height: $h + 2;
        border-radius: 50%;
        background: gray;
        z-index: 2;
        transform: translate(-1rem, 1rem);
      }
    }

    & .move {
      $h: 10rem;

      .bg {
        height: $h;
        background: var(--active-main-bg);
      }

      .progress-line {
        height: $h;
        background: var(--second-text-color);
      }

      .point {
        width: $h + 2;
        height: $h + 2;
        background: white;
      }
    }

    & .stop {
      $h: 4rem;

      .bg {
        height: $h;
      }

      .progress-line {
        height: $h;
        background: white;
      }

      .point {
        width: $h + 2;
        height: $h + 2;
        background: white;
      }
    }
  }
}

//直播的一些样式
.living {
  position: absolute;
  left: 50%;
  font-size: 18rem;
  border-radius: 50rem;
  border: 1px solid #e0e0e0;
  padding: 15rem 20rem;
  line-height: 1;
  color: white;
  top: 70%;
  transform: translate(-50%, -50%);
}
